<template>
    <div class="item">
        <p>{{label}}
            <i class="iconfont"
               :class="{'icon-yanjing_xianshi_o':isPrivate,'icon-yanjing_yincang_o':!isPrivate}"
               @click="isPrivate = !isPrivate">
            </i>
        </p>
        <h4>{{displayValue}}元</h4>
    </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'

  @Component
  export default class Store extends Vue {
    @Prop(String) label !: string
    @Prop({
      default:''
    }) value
    isPrivate: boolean = true

    get displayValue () {
      if(this.value === ''){
        return ''
      }
      if (this.isPrivate) {
        return this.value.toString().replace(/[\s\S]/g, '*')
      }
      return this.value
    }
  }
</script>

<style lang="less" scoped>

    .item {
        width: 250px;
        p {
            color: #999;
            height: 40px;
            line-height: 40px;
        }
        h4 {
            font-size: 24px;
        }
    }

    .iconfont {
        font-size: 20px;
        cursor: pointer;
        color: #0094ff;
    }
</style>
